<template>
	<el-container class="container_box">
		<el-header>
     <img class="logo" :src="logo_img" alt="">
     <el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>我的消息</el-dropdown-item>
						<el-dropdown-item>设置</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
    </el-header>
    <el-container>
      	<!--导航菜单-->
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" unique-opened router>
					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
						<el-submenu :index="index+''" v-if="!item.leaf">
							<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
					</template>
				</el-menu>

    <el-main>
					<el-col :span="24" class="breadcrumb-container">
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24">
							<router-view></router-view>
					</el-col>
		</el-main>
  </el-container>

 </el-container>
</template>

<script>
import logo from '@/assets/home/logo.png'
	export default {
		data() {
			return {
				logo_img:logo, //logo图片
				sysUserName: '',
				sysUserAvatar: '',

			}
    },
    mounted() {
      var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.sysUserName = user.name || '';
				this.sysUserAvatar = user.avatar || '';
			}

		},
		methods: {

			//退出登录
			logout() {
				var _this = this;
				this.$confirm('确认退出登录吗?', '提示', {
				type: 'warning'
				// center: true
				}).then(() => {
					sessionStorage.removeItem('user');
					_this.$router.push('/login');
				}).catch(() => {

				});


			},


		}

	}

</script>

<style rel="stylesheet/scss" lang="scss">
	.el-menu-vertical-demo:not(.el-menu--collapse){
    width: 200px;
    min-height: 400px;
  }
	.container_box {
    height: 100%;
    .el-header{
      background: #20a0ff;
      .logo{
       height: 54px;
       margin-top: 3px;
       float: left;
      }
      .userinfo {
				text-align: right;
				padding-right: 20px;
				float: right;
				.userinfo-inner {
					cursor: pointer;
					color:#fff;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}
    }
  }
  // 面包屑
  .breadcrumb-container{
    background: #eee;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    margin-bottom: 10px;
    .breadcrumb-inner{
       height: 30px;
    line-height: 30px;
    }
  }
</style>
